<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style type="text/css">
		#mycanvas{
			border: solid 1px black;
		}
	</style>
</head>
<body>
<canvas id="mycanvas" height="600" width="800"></canvas>
</body>
<script>
	var clock = document.getElementById('mycanvas').getContext('2d');
	clock.translate(400,300);
	function bp(){
		clock.save();
//		clock.translate(400,300);
		clock.beginPath();
		clock.arc(0,0,150,0,Math.PI/180*360,true);
		clock.lineWidth='3';
		clock.stroke();
		clock.restore();
	}
//	bp();

	function kedu(){
		for (var i = 1; i <= 60; i++) {
			clock.save();//储存当前画布状态
//			clock.translate(400,300);
			clock.rotate(Math.PI / 180*i* 6);
			clock.beginPath();
			if (i % 5 == 0) {
				clock.moveTo(0, 135);
				clock.lineWidth = '3';
				clock.strokeStyle='blue';
			} else {
				clock.moveTo(0, 140);
				clock.lineWidth = '1';
				clock.strokeStyle='black';
			}
			clock.lineTo(0, 150);
			clock.stroke();
			clock.restore();//回到上一次画布的储存位置
		}
	}
//	kedu();
	function Second(){
		var date = new Date();
		clock.save();
//		clock.translate(400,300);
		clock.rotate(Math.PI/180*date.getSeconds()*6);
		clock.beginPath();
		clock.moveTo(0,0);
		clock.lineTo(0,-130);
		clock.strokeStyle='black';
		clock.lineWidth='2';
		clock.stroke();
		clock.restore();//回到上一次画布的储存位置
	}
	function Second(){
		var date = new Date();
		clock.save();
//		clock.translate(400,300);
		clock.rotate(Math.PI/180*date.getSeconds()*6);
		clock.beginPath();
		clock.moveTo(0,40);
		clock.lineTo(0,-130);
		clock.strokeStyle='black';
		clock.lineWidth='2';
		clock.stroke();
		clock.restore();//回到上一次画布的储存位置
	}

	function minute(){
		var date = new Date();
		clock.save();
		clock.rotate(Math.PI/180*date.getMinutes()*6);
		clock.beginPath();
		clock.moveTo(0,25);
		clock.lineTo(0,-115);
		clock.strokeStyle='black';
		clock.lineWidth='3';
		clock.stroke();
		clock.restore();//回到上一次画布的储存位置
	}
	function hour(){
		var date = new Date();
		clock.save();
		clock.rotate(Math.PI/180*(date.getHours()+date.getMinutes()/60)*30);
		clock.beginPath();
		clock.moveTo(0,15);
		clock.lineTo(0,-100);
		clock.strokeStyle='black';
		clock.lineWidth='4';
		clock.stroke();
		clock.restore();//回到上一次画布的储存位置
	}

	function drawClock(){
		clock.clearRect(-400,-300,800,600);
		hour();
		minute();
		kedu();
		bp();
		Second();
	}
	drawClock();
	setInterval(drawClock,1000);
</script>
</html>